<template>
  <el-row>
    <el-col :span="5" style="border-right: 1px solid #DCDFE6">
      <!--第一栏开始-->
      <div class="baritmetop">
        <div class="baritmetopbutton">
          <div style="margin-top: 40px;margin-left: 10px">{{ project.title }}</div>
          <el-button class="proButton" @click="back">切换项目</el-button>
        </div>
      </div>
      <!--第一栏结束-->
     <el-divider></el-divider>
      <!--第二栏开始-->
      <div>
        <div class="baritmetopbutton">
          <div class="baritmemid">
            <svg-icon style="margin-right: 10px" icon-class="true">
            </svg-icon>
            {{ project.status }}
          </div>
          <div class="baritmemid">
            <svg-icon style="margin-right: 10px" icon-class="user-blue">
            </svg-icon>
            {{ project.founderName }}
          </div>
          <div class="baritmemid">
            <svg-icon style="margin-right: 10px" icon-class="all-fill">
            </svg-icon>
            {{ project.process }}
          </div>
          <div class="baritmemid">
            <svg-icon style="margin-right: 10px" icon-class="time-fill">
            </svg-icon>
            {{ project.startTime }}
          </div>
        </div>
      </div>
      <!--第二栏结束-->
      <el-divider></el-divider>
      <!--第三栏开始 第二导航-->
      <el-menu
        :popper-append-to-body="false"
        @select="navigation"
        :default-active="pageIndex"
        class="el-menu-vertical-demo menuHeight"
        active-text-color="#409EFF"
      >
        <el-menu-item class="menuitem" index="1">
          <svg-icon icon-class="bug" class="iconStyle" />
          <span slot="title">缺陷管理</span>
        </el-menu-item>
        <el-menu-item class="menuitem" index="2" v-if="projectInfo.role.indexOf('1') != -1 || projectInfo.role.indexOf('3') != -1 ">
          <svg-icon icon-class="document" class="iconStyle" />
          <span slot="title">用例管理</span>
        </el-menu-item>
        <el-menu-item class="menuitem" index="3" v-if="projectInfo.role.indexOf('1') != -1 ">
          <svg-icon icon-class="team" class="iconStyle" />
          <span slot="title">团队管理</span>
        </el-menu-item>
        <el-menu-item class="menuitem" index="4">
          <svg-icon icon-class="artical" class="iconStyle" />
          <span slot="title">文档管理</span>
        </el-menu-item>
        <el-menu-item class="menuitem" index="5" v-if="projectInfo.role.indexOf('1') != -1 ">
          <svg-icon icon-class="report" class="iconStyle" />
          <span slot="title">报表中心</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="18">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script>

  import { mapGetters } from 'vuex'
  import { getProjectByProjectIdAndUserId } from '@/api/project'

  export default {
    name: 'index',
    data(){
      return{
        project:{},
        pageIndex:'',
      }
    },
    methods:{
      //切换项目按钮调用方法
      back(){
        this.$router.push('/')
        this.$store.dispatch('project/removeProject')
        this.$store.dispatch('app/openSider')
      },
      //导航转路由的方法
      navigation(index){
        let path;
        switch (index) {
          case '1': path='/proDetails/bugManage';break;
          case '2': path='/proDetails/exampleManage';break;
          case '3': path='/proDetails/teamManagement';break;
          case '4': path='/proDetails/documentManagement';break;
          case '5': path='/proDetails/chartManagement';break;
          default:path='/';
        }
        this.$router.push({path:path,query:{pageIndex:index}});
      },
      //获取项目信息
      getProjectInfo(){
        let params = {'userId':this.userInfo.id, 'id':this.projectId}
        getProjectByProjectIdAndUserId(params).then(res => {
          res.data.startTime = res.data.startTime.substring(0,10)
          this.project = res.data
        })
      }
    },
    mounted() {
      if (this.$route.query.pageIndex){
        this.pageIndex = this.$route.query.pageIndex;
      }else{
        this.pageIndex = '1'
      }
      this.getProjectInfo()
    },
    computed: {
      ...mapGetters(['projectId','userInfo','projectInfo'])
    },
  }
</script>

<style scoped>
  .baritmetop{
    height: 90px;
  }
  .baritmetopbutton{
    margin-left: 2rem;
  }
  .proButton{
    margin-top: 20px;background-color: #409EFF; color: #FFFFFF;
  }
  .baritmemid{
    margin-top: 20px;margin-left: 5px;color: #606266;
  }
  .iconStyle{
    margin-left: 15px;
    margin-right: 15px;
  }
  .menuitem{
    font-size: 15px;
  }
  .menuHeight{
    min-height: calc(80vh/2);
  }
</style>
